<template>
	<view class="content">
		<view class="wid100 poRel" style="height: 353rpx;z-index: 1;">
			<image :src="url+'/addon/qianyu_petrol/wxapp/image/cqhql.jpg'" class="wh100"></image>
		</view>
		<view class="wid90 mar borRad20 bacFFF poRel" style="margin-top: -100rpx;z-index: 10;padding: 20rpx 0;">
			<view class="hei20"></view>
			<view class="dis disAl wid90 mar" style="justify-content: space-around;border-bottom: 1px solid #E1DFDF;padding-bottom: 40rpx;">
				<view class="textCen" style="width: 40%;" @click="tiaozhuan('/pages/order/order2')">
					<image src="../../static/yue.png" style="width: 49rpx;height: 51rpx;"></image>
					<view class="fowe600 foSi25 mar-top20" style="">余额：{{userInfo.money}}元</view>
				</view>
				 <!-- @click="tiaozhuan('/pages/order/order')" -->
				<view class="textCen" style="width: 40%;" @click="tiaozhuan('/pages/index/activityList')">
					<image src="../../static/chongzhi.png" style="width: 49rpx;height: 51rpx;"></image>
					<view class="fowe600 foSi25 mar-top20" style="">充值记录</view>
				</view>
			</view>
			<view class="hei60 dis disAl disJuB wid90 mar mar-top20">
				<view class="dis disAl">
					<image src="../../static/jiayou.png" style="width: 41rpx;height: 41rpx;"></image>
					<view class="mar-left20 fowe600 foSi30">{{gasstation.name}}</view>
				</view>
				<view class="dis disAl foSi25" @click="tiaozhuan('/pages/merchant/merchant?id='+jiaId)">
					<view class="mar-right10">切换</view>
					<uni-icons type="right" size="25rpx"></uni-icons>
				</view>
			</view>
		</view>
		<view v-if="list.length > 0" class="wid90 mar bacFFF borRad20 mar-top20" style="padding: 30rpx 0;">
			<view class="wid90 mar">
				<view class="dis disAl fowe600 foSi35">充值活动</view>
				<view style="height: 10rpx;"></view>
				<view class="dis disAl flwa">
					<block v-for="(item,index) in list" :key="index">
						<view class="dis disAl disJuC poRel borRad10 foSi30 mar-top20" @click="mIndex = index"
							:class="mIndex == index?'xuan':'wxuan'">
							<view class="dis disAl disJuC poAbs coFFF foSi18" :class="mIndex == index?'xuanS':'wxuanS'">赠{{item.give}}元</view>
							<view>{{item.money}}元</view>
						</view>
						<view v-if="(index+1)%3 != 0" style="width: 3%;"></view>
					</block>
				</view>
			</view>
		</view>
		<view class="wid100 dis disJuC poAbs" style="bottom: 50rpx;">
			<view class="dis disAl disJuC borRad10 foSi40 coFFF" @click="dingyue()"
				style="width: 480rpx;height: 84rpx;background-color: #035DFF;">立即充值</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				mIndex: 0,
				list: [],
				userInfo: '',
				gasstation: '',
				jiaId: ''
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			var jiaId = uni.getStorageSync('jiaId')
			if(jiaId){
				this.jiaId = jiaId
			}
			this.getUserInfo()
			this.getGasstation()
		},
		methods: {
			getGasstation() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_index',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
					},
					data: {
						id: that.jiaId
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.gasstation = result.data
						}
					}
				})
			},
			getUserInfo() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_user_info',
					method: "POST",
					header: {
						'site-id': that.global.site_id//自定义请求头信息
					},
					data: {
						openid: uni.getStorageSync('openid')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.userInfo = result.data
						}
					}
				})
			},
			dingyue() {
				var that = this
				// 要检查的订阅id
				let id = uni.getStorageSync('tzId').recharge_template
				let id1 = uni.getStorageSync('tzId').integral_variation_template
				// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
				wx.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: function(res) {
						// 调起授权界面弹窗
						// if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
						// 	if (res.subscriptionsSetting.itemSettings !=
						// 		null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
						// 		that.zhifu()
						// 	} else {
								// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
								wx.showModal({
									title: '提示',
									content: '请授权开通服务通知',
									showCancel: true,
									success: function(ress) {
										if (ress.confirm) {
											wx.requestSubscribeMessage({ // 调起消息订阅界面
												tmplIds: [id,id1],
												success(res) {
													console.log('订阅消息 成功 ');
													console.log(res);
													that.zhifu()
												},
												fail(er) {
													console.log("订阅消息 失败 ");
													console.log(er);
													that.zhifu()
												}
											})
										}
									}
								})
						// 	}
						// } else {
						// 	console.log('订阅消息未开启')
						// 	that.zhifu()
						// }
					},
					fail: function(error) {
						console.log(error);
						that.zhifu()
					},
				})
			},
			zhifu(){
				let that = this
				if(that.pd){
					return;
				}
				that.pd = true
				var money = (that.list[that.mIndex].money - 0) + (that.list[that.mIndex].give-0)
				uni.showLoading({
					title:'支付中...'
				})
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_recharge_pay',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						activity_id: that.list[that.mIndex].id,
						pay_money: that.list[that.mIndex].money,
						give_money: that.list[that.mIndex].give,
						money: money,
						gas_station_id: that.jiaId
					},
					success: (res) => {
						let result = res.data
						console.log(result)
						uni.requestPayment({
							timeStamp: result.timeStamp,
							nonceStr: result.nonceStr,
							package: result.package,
							signType: 'MD5',
							paySign: result.paySign,
							success: function (res) {
								console.log(res);
								uni.showModal({
									title: '提示',
									content: '支付成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											setTimeout(function(){
												that.getUserInfo()
											},1500)
										}
									}
								})
							},
							fail: function (err) {
								console.log('fail:' + JSON.stringify(err));
									// 支付失败
								console.log(err)
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								})
							}
						});
					},
					complete() {
						uni.hideLoading()
						that.pd = false
					}
				});
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_recharge_activity_lists',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list = result.data
						}
					}
				})
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		background: linear-gradient(#E4F7FD 20%, #F8F9FD 80%);
		min-height: 100vh;
	}
	.xuan{
		width: 30%;
		height: 109rpx;
		color: #035DFF;
		background-color: #fff;
		border: 4rpx solid #035DFF;
	}
	.wxuan{
		width: 30%;
		height: 109rpx;
		color: #6D6D6E;
		background-color: #E5E5E5;
		border: 4rpx solid #E5E5E5;
	}
	.xuanS{
		height: 28rpx;
		padding: 0 10rpx;
		border-radius: 0rpx 10rpx 0rpx 10rpx;
		right: -4rpx;
		top: -4rpx;
		background-color: #035DFF;
	}
	.wxuanS{
		height: 28rpx;
		padding: 0 10rpx;
		border-radius: 0rpx 10rpx 0rpx 10rpx;
		right: -4rpx;
		top: -4rpx;
		background-color: #A0A0A0;
	}
</style>
